<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="app">
    <h1>{{ $t('welcome-message') }}</h1>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
    <button @click="changeLang('nl')">Dutch</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const i18nPlugin = {
      install(Vue, locales) {
        Vue.prototype.$t = function(id) {
          return locales[this.$root.lang][id];
        };
      }
    };

    Vue.use(i18nPlugin, /* option */ {
      en: { 'welcome-message': 'hello' },
      zh: { 'welcome-message': '你好' },
      nl: { 'welcome-message': 'Hallo' }
    });

    new Vue({
      el: '#app',
      data: {
        lang: 'en'
      },
      methods: {
        changeLang (lang) {
          this.lang = lang
        }
      }
    });
  </script>
</body>
</html>